<template>
    <div>
        <div class="search-box">
            <div class="city-box">
                <span @click="cityFind">{{$store.state.searchCityName}}</span>
                <van-icon name="play"/>
            </div>
            <div class="search-input">
                <input type="search" v-model="searchVal"  v-on:input="search" :placeholder="placeholder||'搜索门票/线路/文创特产'">
                <button></button>
            </div>
            <!-- <div>-->
            <!--  <span><img src="@/assets/images/icon-classification.png"></span>-->
            <!--</div>-->
        </div>
        <div class="search-list" v-show="listShow">
            <ul v-for="(item,index) in searchList" :key="index">
                <li>
                    <van-icon name="search" />
                    <span class="only-1">{{item}}</span>
                </li>
            </ul>
            <div @click="listShow =false"><van-icon name="arrow-up" /></div>
        </div>
    </div>
</template>

<script>
    import area from "../../assets/js/area";
    export default {
        name: "index",
        data(){
            return{
                area,
                searchVal:'',//输入内容
                searchList:[
                    '公园','景点','门票'
                ],//搜索结果类别
                listShow:false,//搜索结果是否显示
                placeholder:''
            }
        },
        methods:{
            cityFind (){//城市搜索
                this.cityShow = true
            },
            search(){
                if (this.searchVal){
                    this.listShow = true
                }else this.listShow = false
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
    .search-box {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 2.6vw 3.3vw;
        box-sizing: border-box;
        border-bottom: 1px solid $gray_bg;
        .back-box img {
            margin-right: 2vw;
            width: 5vw;
        }

        > div > span {
            img {
                width: vw(42);
                margin-left: vw(30);
            }
        }
    }
    .city-box {
        color: #333;
        font-size: vw(30);

        i {
            margin-left: vw(10);
            margin-right: vw(30);
            transform: rotate(90deg);
            font-size: vw(24);
        }
    }
    .search-input {
        display: flex;
        align-items: center;
        flex: 1;
        border-radius: 4vw;
        background-color: #e5e5e5;
        height: 8vw;
        padding: 0 3vw;

        input {
            flex: 1;
            height: 100%;
            font-size: 3.2vw;
            background-color: transparent;
            outline: 0;
            border: 0;
        }



        button {
            width: 8vw;
            height: 100%;
            background: url(../../assets/images/icon-search-g.png) no-repeat center transparent;
            background-size: 50% 50%;
            border: 0;
            outline: 0;
        }
    }

    .search-list {
        ul{
            width: 100%;
            background-color: #fff;
            padding: 0 vw(22);
            li{
                display: flex;
                align-items: center;
                height: vw(90);
                font-size: vw(32);
                border-bottom: 1px solid #F2F2F2;
                i{
                    padding: 0 vw(16);
                    color: #333;
                    font-size: vw(36);
                }
                span{
                    flex: 1;
                }
            }
        }
        div{
            height: vw(77);
            text-align: center;
            line-height: vw(77);
            font-size: vw(48);
        }
    }

</style>